<template>
  <!-- 检测管理组件 -->
  <div class="detect_box" v-show="showDetect">
    <!-- <div class="first_line" style="display: none">
      <div>
        <input
          @blur="addStart"
          id="start_time_choose"
          type="date"
          name="start_time"
          value=""
        />
      </div>
      <span>—</span>
      <div>
        <input
          @blur="addEnd"
          id="end_time_choose"
          type="date"
          name="end_time"
          value=""
        />
      </div>
    </div> -->
    <div class="dialog_wrap" v-dialogDrag="true">
      <div class="dialog_content">
        <div class="dialog_header">
          <div class="detect_box_title">检测专题</div>
          <div class="close_btn" @click="closeQuery">×</div>
        </div>
        <div class="dialog_content_a">
          <!-- <el-button @click="resetChecked">reset</el-button> -->
          <el-tree
            ref="treeRef"
            :data="data"
            show-checkbox
            default-expand-all
            highlight-current
            :props="defaultProps"
            @check-change="handleCheck"
            v-loading="loading"
            node-key="id"
            :check-on-click-node="true"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { Map } from 'ol'
import View from 'ol/View.js'
import 'ol/ol.css'
import VectorLayer from 'ol/layer/Vector.js'
import VectorSource from 'ol/source/Vector.js'
import { Stroke, Style, Circle, Fill } from 'ol/style'
import Text from 'ol/style/Text.js'
import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js'
import LineString from 'ol/geom/LineString.js'
import Polygon from 'ol/geom/Polygon.js'
import Draw, { createBox, createRegularPolygon } from 'ol/interaction/Draw.js'
import * as turf from '@turf/turf' //引入turf做buffer缓冲区分析
import { composeCssTransform } from 'ol/transform'
import { transform } from 'ol/proj'
import { onMounted, ref, toRaw, reactive, watch } from 'vue'
import { VXETable } from 'vxe-table'
import Icon from 'ol/style/Icon.js'
import { require } from '@/utils/require'
import { getJCGLSearch, getJc, getJcTree } from '@/api/index'
import $ from 'jquery'
import axios from 'axios'
//使用mitt进行任意组件通信
import emitter from '@/utils/bus'
// 引入饿了么UI
import 'element-plus/es/components/message/style/css'
import { dayjs, ElMessage } from 'element-plus'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
// 引入echarts
import * as echarts from 'echarts'
//测试用菠萝存储地图容器
import {
  userMap,
  mapStyle,
  switchList,
  switchList5,
  switchList6,
  switchList7,
  switchList8,
  switchList9,
} from '@/store/index'
import XEUtils from 'xe-utils'
let map = userMap() //接收
let list
// 控制检测菜单显隐
const showDetect = ref(false)
let storeDetect = switchList7()
let storeKJCX = switchList5()
let storeRepair = switchList6()
let storeCube = switchList8()
let storeDia = switchList9()
let changeDetect
watch(storeDetect, () => {
  changeDetect = toRaw(storeDetect.queryBtn)
  if (changeDetect == true) {
    if (toRaw(storeDia.queryBtn) == true) {
      storeDia.queryBtn = false
      showDetect.value = true
      storeKJCX.queryBtn = false
      storeCube.queryBtn = false
      storeRepair.queryBtn = false
    } else {
      showDetect.value = true
      storeKJCX.queryBtn = false
      storeCube.queryBtn = false
      storeRepair.queryBtn = false
    }
  } else {
    closeQuery()
  }
})

const closeQuery = () => {
  showDetect.value = false
  storeDetect.queryBtn = false
  resetChecked()
  const arr = list.getLayers().getArray()
  for (let i = 0; i < arr.length; i++) {
    if (
      arr[i].values_.title != 'GeoJSON' &&
      arr[i].className_ != 'myTdt' &&
      arr[i].className_ != 'HJLayer'
    ) {
      arr[i].getSource().clear()
    }
  }
}
let detectFeature
let detectSource
let detectLayer
const thisMonth = ref(null)
const pastMonth = ref(null)
onMounted(() => {
  list = toRaw(map.map)
  // 注册检测图层
  detectSource = new VectorSource({
    wrapX: false,
  })
  detectLayer = new VectorLayer({
    source: detectSource,
  })
  list.addLayer(detectLayer)
  // 获取检测最近一个月的数据
  /*  $(document).ready(function () {
    var time = new Date()
    var day = ('0' + time.getDate()).slice(-2)
    var month = ('0' + (time.getMonth() + 1)).slice(-2)
    var lastMonth = ('0' + time.getMonth()).slice(-2)
    var lastToday = time.getFullYear() + '-' + lastMonth + '-' + day
    pastMonth.value = lastToday
    var today = time.getFullYear() + '-' + month + '-' + day
    thisMonth.value = today
    // $('#start_time_choose').val(lastToday)
    // start_time_choose.value = $('#start_time_choose').val()
    // $('#end_time_choose').val(today)
    // end_time_choose.value = $('#end_time_choose').val()
  }) */
  openList()
})
// 树结构表单
const treeRef = ref()
const defaultProps = {
  children: 'children',
  label: 'label',
  disabled: 'disabled',
}
// const data = ref([
//   {
//     label: '工程一',
//     children: [
//       {
//         label: '公司一',
//       },
//       {
//         label: '公司二',
//       },
//     ],
//   },
// ])
const data = ref([])

// 打开可勾选的树形控件
//滚动loading
const loading = ref(false)
const openList = () => {
  loading.value = true
  const str2 = dayjs(Date.now()).format('YYYY-MM-DD')
  const str1 = dayjs(Date.now()).subtract(30, 'day').format('YYYY-MM-DD')
  // console.log('检测传参', str1, str2)
  getJcTree().then((res) => {
    if (res.code == 200 && res.data.length >= 1) {
      const arr = res.data
      const _arr = []
      for (let i = 0; i < arr.length; i++) {
        const url = arr[i].eid
        const index = url.lastIndexOf('-')
        const str = url.substring(index + 1, url.length)
        if (str != 'null' || arr[i].location != 'null') {
          const value = arr[i].testingAddress + '(' + arr[i].lengths + 'm)'
          _arr.push(Object.assign({}, arr[i], { eidPlus: value }))
        }
      }
      console.log('检测目录', _arr)
      const list = _arr
      let res2 = []
      const obj2 = XEUtils.groupBy(list, 'areaName')
      XEUtils.each(obj2, (childs, key) => {
        const obj4 = XEUtils.groupBy(childs, 'testingCompany')
        const a = obj4
        const arr = []
        for (let key2 in a) {
          // console.log('第三级', key2, a[key2])
          const obj5 = XEUtils.groupBy(a[key2], 'eidPlus')
          const b = obj5
          const arr2 = []
          for (let key3 in b) {
            arr2.push({
              id: key3,
              label: key3,
              Features: b[key3],
            })
          }
          arr.push({
            id: key2,
            label: key2,
            disabled: true,
            children: arr2,
          })
        }
        const obj3 = {
          id: key,
          label: key,
          disabled: true,
          children: arr,
        }
        res2.push(obj3)
      })
      data.value = res2
      loading.value = false
    } else {
      console.log('暂无数据', res)
    }
  })
}
const resetChecked = () => {
  treeRef.value.setCheckedNodes([], false)
  console.log('关闭检测', treeRef.value.getCheckedNodes())
}
const eVal = ref('')
const handleCheck = (checkedNodes, isChecked) => {
  if (toRaw(checkedNodes).children == undefined && isChecked == true) {
    const serve = toRaw(checkedNodes).Features
    getJc(serve[0].eid).then((res) => {
      const arr = res.data
      console.log('检测表单', res)
      for (let i = 0; i < arr.length; i++) {
        list.getView().setResolution(0.52916772500211673)
        list.getView().setCenter([arr[0].testingStartX, arr[0].testingStartY])
        const arr1 = [arr[i].testingStartX, arr[i].testingStartY]
        const arr2 = [arr[i].testingEndX, arr[i].testingEndY]
        //
        const url = arr[i].eid
        const index = url.lastIndexOf('-')
        const str = url.substring(index + 1, url.length)
        if (str != 'null' || arr[i].location != 'null') {
          const value = arr[i].testingAddress + '(' + arr[i].lengths + 'm)'
          eVal.value = value
        }
        // 坐标为0就不展示
        detectFeature = new Feature({
          geometry: new LineString([arr1, arr2]),
          attributes: [[arr[i].startId], [arr[i].endId]],
          attributes2: arr[i].featId,
          testingCompany2: arr[i].testingCompany2,
          layerName: 'detectLayer',
          eidPlus: eVal.value,
        })
        detectSource.addFeature(detectFeature)
        if (arr[i].defectLevel != null) {
          if (arr[i].defectLevel.indexOf('4') != -1) {
            // console.log(arr[i].defectLevel)
            detectFeature.setStyle(
              new Style({
                stroke: new Stroke({
                  color: `#e63631`,
                  width: 3,
                }),
              })
            )
          } else if (arr[i].defectLevel.indexOf('3') != -1) {
            detectFeature.setStyle(
              new Style({
                stroke: new Stroke({
                  color: `#ef6036`,
                  width: 3,
                }),
              })
            )
          } else if (arr[i].defectLevel.indexOf('2') != -1) {
            detectFeature.setStyle(
              new Style({
                stroke: new Stroke({
                  color: `#f5aa41`,
                  width: 3,
                }),
              })
            )
          } else if (arr[i].defectLevel.indexOf('1') != -1) {
            detectFeature.setStyle(
              new Style({
                stroke: new Stroke({
                  color: `#fbd78b`,
                  width: 3,
                }),
              })
            )
          } else {
            // console.log('有等级', arr[i].defectLevel)
            detectFeature.setStyle(
              new Style({
                stroke: new Stroke({
                  color: `#067e06`,
                  width: 3,
                }),
              })
            )
          }
        } else {
          // console.log('无等级', arr[i].defectLevel)
          detectFeature.setStyle(
            new Style({
              stroke: new Stroke({
                color: `#067e06`,
                width: 3,
              }),
            })
          )
        }
      }
    })
  } else if (toRaw(checkedNodes).children == undefined && isChecked == false) {
    // console.log('子级取消', toRaw(checkedNodes).label)
    detectSource.forEachFeature((feature) => {
      console.log(feature.values_.eidPlus, toRaw(checkedNodes).label)
      if (feature.values_.eidPlus == toRaw(checkedNodes).label) {
        detectSource.removeFeature(feature)
      }
    })
  }
}
</script>
<style lang="less" scoped>
.dialog_content {
  position: fixed;
  top: 50px;
  left: 8px;
  width: 370px;
  border: 1px solid #80eeff;
  background: #0a163cc9;

  .dialog_header {
    height: 50px;
    width: 100%;
  }
}
.dialog_wrap {
  .dialog_content_a {
    overflow: auto;
    height: 53vh;
    width: 369px;
  }
  :deep(.dialog_content_a) {
    scrollbar-color: #0a163cc9 #80eeff; /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
    scrollbar-width: thin; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
    -ms-overflow-style: none; /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
  }
  :deep(.dialog_content_a::-webkit-scrollbar) {
    width: 3px;
    height: 3px; // 纵向滚动条 必写
  }
  :deep(.dialog_content_a::-webkit-scrollbar-corner) {
    background: #0a163cc9;
  }
  :deep(.dialog_content_a::-webkit-scrollbar-thumb) {
    background-color: #80eeffce;
    // border: 1px dashed #888888;
    width: 2px;
    height: 80px;
  }
  :deep(.el-tree) {
    background: #0a163c5d;
    color: #fff;
    --el-tree-node-hover-bg-color: #0a163cc9;
    width: 500px;
    overflow-x: scroll;
  }
  :deep(
      .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content
    ) {
    background: #0a163c5d;
  }
}
// 关闭菜单按钮
.close_btn {
  // color: #269bff;
  color: #80eeff;
  position: absolute;
  font-size: 40px;
  right: 5px;
  top: -18px;
  cursor: pointer;
}
// 旋转按钮
.aa {
  position: absolute;
  background: #ffffff;
  height: 70px;
  width: 8px;
  right: -8px;
  z-index: 9999;
  top: 230px;
  cursor: pointer;
}
.aa img {
  position: absolute;
  top: 30px;
  width: 100%;
  transition: all 0.5s;
}
.go {
  position: absolute;
  background: #ffffff;
  height: 70px;
  width: 8px;
  // right: 0px;
  z-index: 9999;
  top: 230px;
  cursor: pointer;
}
.go img {
  position: absolute;
  top: 30px;
  width: 100%;
  transition: all 0.5s;
  transform: rotate(180deg);
}
/* 检测管理细节 */

.toggle_btn {
  position: absolute;
  background: #000;
  height: 70px;
  width: 7px;
  right: 0px;
  z-index: 9999;
  top: 230px;
  cursor: pointer;
}
.toggle_btn img {
  position: absolute;
  top: 30px;
}
// 标题
.detect_box_title {
     text-align: center;
    background: #0e1d4cc9;
    height: 36px;
    line-height: 32px;
    border-bottom: 1px solid #80eeff;
    font-size: 17px;
    font-weight: 600;
    color: #80eeff;
}
// 两个时间input框
.first_line input {
  width: 140px;
  height: 30px;
  border: 1px solid #3dabff;
  border-radius: 5px;
  outline: none; //去除默认外框
}
.first_line input:focus {
  outline: 1px solid #3dabff; //更改外框粗细
}
/* 折叠菜单 */
.fade-enter-active,
.fade-leave-active {
  // transition: opacity 1s ease;
  transition: all 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  // opacity: 0;
  // position: absolute;
  // left: -1000px;
  transform: translateX(-350px);
  // width: 0px;
}

// 轮播图
.bannerimg {
  width: 100%;
  height: 400px;
}
.poly {
  :deep(.el-carousel__indicator--horizontal .el-carousel__button) {
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid #ffffff;
    border-radius: 50%;
    opacity: 0.5;
  }
  :deep(.el-carousel__indicator--horizontal.is-active .el-carousel__button) {
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 1;
  }
  :deep(.el-carousel__container) {
    height: 400px;
  }
}
// 图片弹窗头
html {
  position: relative;
}
html .picPop {
  position: absolute;
  left: 0;
  :deep(.vxe-modal--wrapper .vxe-modal--header) {
    background: #2a88e1 !important;
    color: #fff;
  }
  :deep(.vxe-modal--header-right) {
    transform: translateY(6%);
    font-size: 18px;
  }
}

// 检测弹窗选项
.first_line {
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  padding: 0 25px 0 15px;
  text-align: center;
}
.first_line span {
  color: #23a0ff;
}

.second_line {
  font-size: 13.5px;
  margin: 15px;
  display: flex;
  justify-content: space-around;
  height: 50px;
}
.second_line_a {
  font-weight: 500;
  width: 80px;
  margin-right: 25px;
}
.second_line_b {
  transform: translateY(-10%);
  width: 80px;
}
.second_line_c {
  transform: translateY(-10%);

  width: 160px;
}
.third_line {
  font-size: 13.5px;
  font-weight: 500;
  width: 350px;
  // background: #e0dbdb;
  padding: 0 15px;
}
.third_line_a {
  display: inline-block;
  margin-right: 20px;
  transform: translateY(-5px);
}
.third_line button {
  position: absolute;
  right: 24px;
  top: 38.4%;
  margin: 0;
  padding: 0;
  width: 50px;
  border-radius: 10px;
  border: 1px solid #2ba3ff; //自定义边框
  color: #2ba3ff;
}
/* 修改表头宽高 */
.vxe_table_box {
  :deep(thead) {
    font-size: 13px;
    height: 10px;
  }
  :deep(tbody) {
    font-size: 13px;
  }
  :deep(.vxe-header--column) {
    line-height: 5px;
  }
  :deep(.body--wrapper) {
    scrollbar-color: #0a163cc9 #80eeff; /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
    scrollbar-width: thin; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
    -ms-overflow-style: none; /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
  }
  :deep(.body--wrapper::-webkit-scrollbar) {
    width: 3px;
    height: 4px; // 纵向滚动条 必写
  }
  :deep(.body--wrapper::-webkit-scrollbar-thumb) {
    background-color: #80eeffce;
    // border: 1px dashed #888888;
    width: 2px;
    height: 80px;
  }
}
/* 检测底部按钮组 */
.open_btns {
  position: absolute;
  right: 15px;
  bottom: 18px;
}
.open_btns button {
  margin: 0 5px 0 0;
  padding: 0;
  width: 75px;
  height: 22.8167px;
  border-radius: 10px;
  border: 1px solid #2ba3ff; //自定义边框
  color: #2ba3ff;
}

/* 分割线 */
.el-span {
  display: inline-block;
  margin-right: 30px;
  transform: translateY(-5px);
}
.baffle {
  clear: both;
  zoom: 1;
}
// 修复
.XF_first_line {
  float: right;
  width: 950px; //修改进度条宽度
}
.XF_first_line_a {
  margin-left: 300px;
}
.XF_first_line span {
  margin-right: 20px;
}
.XF_second_line {
  display: inline-block;
  margin-right: 30px;
}
// 修改input框长度
.detect_box {
  :deep(.vxe-input) {
    display: inline-block;
    position: relative;
    width: 310px;
    margin: 15px;
  }
  :deep(.vxe-input .vxe-input--search-icon) {
    color: #1c9cfe;
  }
}

.chart {
  height: 400px;
}
.vxe-button.type--button {
  float: right;
}
// 折叠按钮
.foldable_btn {
  float: right;
  margin-top: 0.5%;
}
/* 
    img 外侧盒子
*/
.guild_img_box {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  display: block;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
    0 1px 10px 0 rgb(0 0 0 / 12%) !important;
  border: 1px solid #e9e9e9;
  overflow: hidden;
}
.guild_img_box > img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}
.testReport {
  position: relative;
  width: 900px;
  height: 500px;
  margin: 0 auto;
  display: block;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
    0 1px 10px 0 rgb(0 0 0 / 12%) !important;
  border: 1px solid #e9e9e9;
  overflow: hidden;
}

.testReport > iframe {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
}

.PopTable {
  position: absolute;
  overflow: hidden;
  left: -400%;
  top: 25%;
  width: 1000px;
  z-index: 99;
}
.start_time {
  position: absolute;
  color: black;
  left: -400%;
  top: 10%;
  z-index: 9999;
  height: 50px;
  line-height: 50px;
}

.end_time {
  position: absolute;
  color: black;
  left: -335%;
  top: 10%;
  z-index: 9999;
  height: 50px;
  line-height: 50px;
}

.time_search {
  position: absolute;
  left: -295%;
  top: 12%;
  z-index: 9999;
  color: white;
  border: none;
  outline: none;
  border-radius: 4px;
  background-color: #00c0ef;
  vertical-align: middle;
  width: 60px;
  height: 30px;
  margin-left: 96px;
}
.time_search_X {
  position: absolute;
  left: -265%;
  top: 12%;
  z-index: 9999;
  color: white;
  border: none;
  outline: none;
  border-radius: 4px;
  background-color: #00c0ef;
  vertical-align: middle;
  width: 60px;
  height: 30px;
  margin-left: 96px;
}
.time_search_XX {
  position: absolute;
  left: -235%;
  top: 12%;
  z-index: 9999;
  color: white;
  border: none;
  outline: none;
  border-radius: 4px;
  background-color: #00c0ef;
  vertical-align: middle;
  width: 60px;
  height: 30px;
  margin-left: 96px;
}

.list_title {
  margin-top: 2%;
  height: 25px;
  border-bottom: 2px solid #72ed5c;
  font-weight: 600;
  font-size: 15px;
  color: #80eeff;
}
</style>
